<style>
    .send {
        display: block;
        height: 105px;
        width: 135px;
        /*border-radius: 20%;*/
        overflow: hidden;
        position: relative;
        margin: 10px auto;
        margin-left: 18px;
        padding: 0px;
        /*-moz-box-shadow: 0px 0px 10px #999;*/
        /*-webkit-box-shadow: 0px 0px 10px #999;*/
        /*box-shadow: 0px 0px 10px #999;*/
    }
    .send input{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        z-index: 55;
        opacity: 0;
    }
    .send img{
        display: block;
        width: 135px;
        height: 105px;
        overflow: hidden;
        /*border-radius: 20%;*/
    }
</style>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>系统设置</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{:url('admin/index/index')}">控制台</a>
            </li>
            <li class="active">
                <strong>系统设置</strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content animated ">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <!--<div class="ibox-title">-->
                    <!--&lt;!&ndash;<h5>All form elements <small>With custom checbox and radion elements.</small></h5>&ndash;&gt;-->
                <!--</div>-->
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" action="" enctype="multipart/form-data">
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="tabs.html#tab-1" aria-expanded="true"> 基础配置</a></li>
                                <li class=""><a data-toggle="tab" href="tabs.html#tab-2" aria-expanded="false">高级配置</a></li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        {foreach $jichu as $item}
                                        <div class="form-group"><label class="col-sm-2 control-label">{$item['remark']}</label>
                                            <div class="col-sm-9" >
                                                {switch name="$item['leixing']" }
                                                    {case value="1"}
                                                        <input type="text" value="{$item['value']}" class="form-control" name="{$item['id']}">
                                                    {/case}
                                                    {case value="2"}
                                                        <textarea class="form-control" name="{$item['id']}">{$item['value']}</textarea>
                                                    {/case}
                                                    {case value="3"}
                                                <input type="radio" value="1" name="{$item['id']}"  {if condition="$item['value'] eq 1 "}checked{/if} >开启　　
                                                <input type="radio" value="0" name="{$item['id']}" {if condition="$item['value'] eq 0 "}checked{/if} >关闭
                                                    {/case}
                                                    {case value="4"}
                                                    <span class="send">
                                                        <img id="preview-{$item['id']}" src="{$item['value']}">
                                                        <input type="file" name="{$item['id']}" id="doc-{$item['id']}" onchange="javascript:setImagePreview('doc-{$item.id}', '{$item.id}');" />
                                                    </span>
                                                    {/case}
                                                    {default /}配置错误
                                                {/switch}
                                            </div>
                                        </div>
                                        {/foreach}
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="panel-body">
                                        {foreach $gaoji as $item}
                                        <div class="form-group"><label class="col-sm-2 control-label">{$item['remark']}</label>
                                            <div class="col-sm-9">
                                                {switch name="$item['leixing']" }
                                                    {case value="1"}
                                                        <input type="text" value="{$item['value']}" class="form-control" name="{$item['id']}">
                                                    {/case}
                                                    {case value="2"}
                                                        <textarea class="form-control" name="{$item['id']}">{$item['value']}</textarea>
                                                    {/case}
                                                {case value="2"}
                                                <textarea class="form-control" name="{$item['id']}">{$item['value']}</textarea>
                                                {/case}
                                                {case value="3"}

                                                {/case}
                                                {case value="4"}
                                                <span class="send">
                                                        <img id="preview-{$item['id']}" src="{$item['value']}">
                                                        <input type="file" name="{$item['id']}" id="doc-{$item['id']}" onchange="javascript:setImagePreview('doc-{$item.id}', '{$item.id}');" />
                                                    </span>
                                                {/case}
                                                    {default /}配置错误
                                                {/switch}
                                            </div>
                                        </div>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-2 col-sm-offset-2">
                                <button class="btn btn-primary btn-block" type="submit">确认修改</button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //下面用于图片上传预览功能
    function setImagePreview(id, img) {
        var docObj = document.getElementById(id);
        var imgObjPreview = document.getElementById("preview-"+img);
        if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '125px';
            imgObjPreview.style.height = '125px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
        else {
//IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
//必须设置初始大小
            localImagId.style.width = "36px";
            localImagId.style.height = "36px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }
            catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>